<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="categoryId" test="name" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
    </el-form>

    <el-table :data="productList" v-if="productList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="名称" prop="name"/>
      <el-table-column label="产品类型" v-if="productCategoryList">
        <template slot-scope="scope">
          {{getName(scope.row,productCategoryList)}}
        </template>
      </el-table-column>
      <el-table-column label="导入">
        <template slot-scope="scope">
          <i class="el-icon-download" style="color:blue" @click="loadBtn(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>

<script>
  import filterTool from '@/common/filterTool'
  import searchTool from '@/common/searchTool'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "loadByProduct",
    components:{filterTool,searchTool},
    props:['companyId'],
    data() {
      return {
        productList:null,
        totalPage:0,
        productCategoryList:null,
        filterObj:{}
      }
    },
    created() {
      this.getProductCategoryList()//加载产品类型列表
      this.getProductList()//加载公司下产品列表
    },
    mounted() {
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch: {},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      searchTag(id,array){
        array.forEach(a=>{
          if(a.id === id){
            console.log(a)
            this.product.data.prop={...a.data}
            this.currCategory=a
            this.makeDataUi(this.product.data.prop)
            return
          }else if(a.childrens){
            this.searchTag(id,a.childrens)
          }
        })
      },
      getName(row,array){
        let name=null
        for(let i=0;i<array.length;i++){
          if(name !== null){
            break
          }
          let pc=array[i]
          if(pc.id === row.categoryId){
            name =pc.name
          }else if(pc.childrens){
            name =this.getName(row,pc.childrens)
          }else {
            continue
          }
        }
        return name
      },
      filterEvent(e){
        console.log('筛选条来的----',e)
        for(let key in e){
          this.filterObj[key]=e[key]
        }
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k]){
            tmp[k]=this.filterObj[k]
          }
        }
        this.getProductList(0,tmp)//加载公司下产品列表
      },
      searchProductEvent(e){
        console.log('搜索条来的----',e)
      },
      getProductCategoryList(){
        console.log('没到这？？？')
        this.fetch({name:"getProductCategoryList"})
          .then(res=>{
            console.log('直接获取----',res)
            this.productCategoryList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getProductList(pageNo,filterObj){
        this.fetch({name:"getProductList",data:{page:pageNo?pageNo:0,companyId:this.companyId,...filterObj}})
          .then(res=>{
            console.log(res)
            this.productList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      loadBtn(row){
        console.log('选中导入----',row)
        if(row.productSpecs.length <= 0){
          this.$message({type:'info',message:'该产品无sku可导入'})
          return
        }
        let tmp=[]
        row.productSpecs.forEach(ps=>{
          let p={
            price:ps.price,sn:ps.sn,props:ps.props,edit:true,data:ps.data
          }
          tmp.push(p)
        })
        console.log('load----',tmp)
        this.$emit('confirm',tmp,row)
      }
    }
  }
</script>

<style scoped>

</style>
